<!--
  *@Description : 商品的底部栏
  *@author 萧红
  *@date 2020-04-02 23:41
  *@LastEditTime 2020-04-02 23:41
  *@LastEdititors
-->
<template>
    <div id="shopBottom">
      <div class="icon-area">
        <div class="item">
          <span class="iconfont iconxiaoxi1"></span>
          <span>私聊</span>
        </div>
        <div class="item">
          <span class="iconfont iconshangcheng"></span>
          <span>店铺</span>
        </div>
        <div class="item">
          <span class="iconfont iconshoucang"></span>
          <span>收藏</span>
        </div>

      </div>
      <div class="btn-area">
        <div class="add-car" @click="$emit('showSelect',1)">
          加入购物车
        </div>
        <div class="buy-btn" @click="$emit('showSelect',2)">
          立即剁手
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'ShopBottom'
}
</script>

<style scoped lang="stylus">
#shopBottom
{
  width: 100%;
  height: 55px;
  line-height: 55px;
  position: fixed;
  bottom: 0;
  z-index: 2;
  background-color:white;
  display flex
  flex-flow row nowrap
  box-sizing border-box
  border-top:1px solid #f0f0f0
  .icon-area
  {
    width 40%
    padding 3px 4px
    display: flex;
    flex-flow: row nowrap;
    justify-content space-around
    box-sizing border-box
    .item
    {
      width 30%
      display flex
      flex-flow column nowrap
      justify-content space-between
      span:first-child
      {
        margin-top 2px
        height 25px
        font-size 25px
        color deeppink
      }
      span
      {
        height 30px;
        line-height 30px
      }
    }
  }
  .btn-area
  {
    width 60%
    display flex
    flex-flow row nowrap
    justify-content flex-start
    box-sizing border-box
    div
    {
      width:50%;
      height 55px
      background-color #ff9bae;
      color:snow
      font-size 14px
    }
    .buy-btn
    {
      background-color #ff4466
    }
  }
}
</style>
